<template>
  <section>
    <el-form :inline="true" :model="listQuery">
      <el-form-item label="">
        <el-input size="mini" placeholder="请输入订单编号" v-model="listQuery.orderNo" />
      </el-form-item>
      <el-form-item label="">
        <el-input size="mini" placeholder="供应商名称/编号" v-model="listQuery.agencyName" />
      </el-form-item>
      <el-form-item label="">
        <el-select size="mini" v-model="listQuery.type" placeholder="类型" clearable>
          <el-option label="全部类型" value="0"></el-option>
          <el-option label="订单结算" value="1"></el-option>
          <el-option label="提现" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-date-picker value-format="yyyy-MM-dd" size="mini" v-model="date" type="daterange" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" @click="handleFilter">查询</el-button>
        <el-button class="ml10" size="mini" @click="exportExcel">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table ref="dataTable" :height="tableHeight" :data="list" @sort-change="tblSort" style="width: 100%">
      <el-table-column align="left" label="供应商">
        <template slot-scope="scope">
          <span>{{ scope.row.agencyName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="类型">
        <template slot-scope="scope">
          <span>{{ scope.row.typeName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="right" label="金额" sortable="custom" prop="money">
        <template slot-scope="scope">
          <span>￥{{ scope.row.money }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="时间" sortable="custom" prop="created_at">
        <template slot-scope="scope">
          <span>{{ scope.row.createdAt }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单号">
        <template slot-scope="scope">
          <el-link type="primary" @click="handleDetail(scope.row)">{{ scope.row.orderNo }}</el-link>
        </template>
      </el-table-column>
      <el-table-column align="center" label="三方订单号" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.outOrderNo }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="商品">
        <template slot-scope="scope">
          <span>{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="规格">
        <template slot-scope="scope">
          <span>{{ scope.row.attribute }}</span>
        </template>
      </el-table-column>
      <el-table-column align="right" label="下单数量" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.quantity }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="listQuery.pageNum" :page-sizes="[20, 30, 50]" :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
    </div>
  </section>
</template>

<script>
import {
  agency_money_record_list,
  agency_money_record_list_export
} from '../../api/partner';
export default {
  components: {
  },
  data() {
    return {
      date: undefined,
      orderLoading: false,
      tableHeight: 200,
      list: null,
      listLoading: true,
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        agencyName: undefined,
        orderNo: undefined,
        orderCol: "",
        orderAsc: "",
        type: '0',
        startDate: undefined,
        endDate: undefined,
      },
      total: null,
    }
  },
  mounted() {
    const that = this

    window.onresize = () => {

      return (() => {

        that._getTableHeight()

      })()
    }
  },
  created() {
    this._getTableHeight();
    this.getList();
  },
  methods: {
    _getTableHeight() {
      this.tableHeight = window.innerHeight - 250
    },
    getList() {
      if (this.date) {
        this.listQuery.startDate = this.date[0];
        this.listQuery.endDate = this.date[1];
      } else {
        this.listQuery.startDate = undefined;
        this.listQuery.endDate = undefined;
      }
      this.listLoading = true;
      agency_money_record_list(this.listQuery).then(response => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.listLoading = false;
      })
    },
    handleFilter() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    tblSort(d) {
      this.listQuery.orderCol = d.prop;
      this.listQuery.orderAsc = d.order;

      this.handleFilter();
    },
    createCellPos(n) {
      var ordA = 'A'.charCodeAt(0);

      var ordZ = 'Z'.charCodeAt(0);

      var len = ordZ - ordA + 1;

      var s = "";



      while (n >= 0) {

        s = String.fromCharCode(n % len + ordA) + s;

        n = Math.floor(n / len) - 1;

      }

      return s;

    },
    exportExcel() {
      agency_money_record_list_export(this.listQuery).then((res) => {
        if (res.data.items && res.data.items.length > 0) {
          let items = res.data.items;

          let export_config = res.data.exportConfig;
          items.unshift(export_config.header)

          var column = null;
          eval("column = " + export_config.columnJs);
          console.log(column)
          let export_data = LAY_EXCEL.filterExportData(items, column);
          let sheet_data = new Object();
          eval("sheet_data." + res.data.sheet + "=export_data;");
          let cellPos = this.createCellPos(parseInt(export_config.columnCount) - 1);

          LAY_EXCEL.setExportCellStyle(export_data, "A1:" + cellPos + "1", {
            s: {
              fill: { fgColor: { rgb: "FFFF00" } },
              alignment: {
                horizontal: 'center',
                vertical: 'center'
              },
              font: {
                sz: 12,
                bold: true
              }
            }
          });

          LAY_EXCEL.exportExcel(sheet_data, res.data.fileName, 'xlsx', {
            extend: {
              '!merges': export_config.mergeCells,
              '!cols': export_config.width,
              '!rows': LAY_EXCEL.makeRowConfig({
                1: 40
              })
            }
          });
        } else {
          this.$message.error("导出数据为空");
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    handleDetail(row) {
      let { href } = this.$router.resolve({ path: '/order_detail?id=' + row.orderId });
      window.open(href, '_blank');

    }
  }
};
</script>
<style lang="scss" scoped></style>
